<!DOCTYPE html>
<html>
<head>
	<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="../css/froala_editor.min.css" rel="stylesheet" type="text/css">


    <style>
        body {
            text-align: center;
        }

        section {
            width: 80%;
            margin: auto;
            text-align: left;
        }
    </style>
</head>

<body>
  <section id="editor">
    <a href="#" class="edit">Link To Test on</a>

    <div class="edit2">Hello people. Here we are on the moon.</div>
  </section>

  <script src="../js/libs/jquery-1.11.1.min.js"></script>
  <script src="../js/froala_editor.min.js"></script>
  <!--[if lt IE 9]>
    <script src="../js/froala_editor_ie8.min.js"></script>
  <![endif]-->
  <script src="../js/plugins/tables.min.js"></script>
  <script src="../js/plugins/lists.min.js"></script>
  <script src="../js/plugins/colors.min.js"></script>
  <script src="../js/plugins/media_manager.min.js"></script>
  <script src="../js/plugins/font_family.min.js"></script>
  <script src="../js/plugins/font_size.min.js"></script>
  <script src="../js/plugins/block_styles.min.js"></script>
  <script src="../js/plugins/video.min.js"></script>

  <script>
      $(function(){
        $('.edit').editable({linkList: [
            {
            body: 'Google',
            title: 'An awesome search engine',
            href: 'http://google.com',
            nofollow: true,
            blank: true
          },
          {
            body: 'Froala',
            title: 'An website builder for everyone',
            href: 'http://froala.com',
            nofollow: false,
            blank: false
          }
        ],

        linkClasses: {
          'f-link': 'Simple link',
          'r-link': 'Reversed link'
        }})

        $('.edit2').editable()
      });
  </script>
</body>
</html>
